<template>
	<view class="container">
		<view class="zone-header" :style="{ backgroundImage: `url(${memberInfo.banner_image_id > 0 ? memberInfo.banner.file_path : staticFileDomain + '/static/temp/mine-head.png'})` }">
			<view class="zone-score" v-if="score > 0 && userInfo.login_identity == 10" >
				<view class="zone-score-bar">匹配度{{ score }}%</view>
			</view>
			<view class="zone-header-content">
				<view class="zone-header-face">
					<image class="zone-header-face-image" :src="memberInfo.avatar ? memberInfo.avatar.file_path : ''"></image>
					<image class="zone-header-face-icon" :src="memberInfo.vip_file"></image>
				</view>
				<view class="zone-header-name">
					<view class="zone-header-name-text ">{{ memberInfo.nickName }}</view>
					<sex-age-symbol :isMine="false" :sex="memberInfo.gender" :age="memberInfo.birth_age"></sex-age-symbol>
				</view>
				<view class="zone-header-count">
					<view class="zone-header-count-item follow">{{ memberInfo.master_data ? memberInfo.master_data.follow_count : '0' }}</view>
					<view class="zone-header-count-dot"></view>
					<view class="zone-header-count-item fans">{{ memberInfo.master_data ? memberInfo.master_data.fans_count : '0' }}</view>
				</view>
			</view>
			<u-sticky h5-nav-height="44" :offset-top="stickyOffsetTop" bg-color="rgba(255,255,255,0)" @fixed="fixedToTop" @unfixed="unfixedToTop">
				<!-- 只能有一个根元素 -->
				<view class="zone-sticky" :class="{ 'fixed-top': fixedTop }">
					<view class="zone-sticky-tab"><u-tabs bar-width="60" font-size="26" active-color="#F85962" height="70" :list="list" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs></view>
				</view>
			</u-sticky>
		</view>
		<mescroll-body ref="mescrollRef" v-if="current == 0" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :height="scrollHeight + 'px'">
			<view class="zone-body moment">
				<block v-for="item in momentList" :key="item.moment_id" :id="'momentId-' + item.moment_id"><moment-card :moment-object="item"></moment-card></block>
			</view>
			<view class="zone-bottom" v-if="canHandle"></view>
		</mescroll-body>
		<mescroll-body v-if="current == 1" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :height="scrollHeight + 'px'">
			<view class="zone-body">
				<view class="zone-ablum">
					<view class="zone-image" v-for="(item, index) in photoList" :key="item.file_id"><u-image @click="previewImage(index)" width="100%" height="100%" :src="item.file.file_path"></u-image></view>
				</view>
			</view>
			<view class="zone-bottom" v-if="canHandle"></view>
		</mescroll-body>
		<view class="zone-body" v-if="current == 2">
			<mescroll-empty v-if="!memberData.basic && !memberData.coup && !memberData.group" :option="userDataEmpty"></mescroll-empty>
			<view class="data-group" v-if="memberData.basic">
				<view class="data-group-title">
					<image class="data-group-title-icon" :src="memberData.basic.icon" mode="aspectFit"></image>
					<view class="data-group-title-text">{{ memberData.basic.group_name }}</view>
				</view>
				<view class="data-group-content">
					<u-cell-group :border="false">
						<!--  -->
						<u-cell-item :title-style="titleStyle" :value-style="valueStyle" hover-class="none" :border-bottom="false" :arrow="false" :title="param.name" :value="param.setting || '未填写'" v-for="(param, index) in memberData.basic.params" :key="param.id"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
			<view class="data-group" v-if="memberData.coup">
				<view class="data-group-title">
					<image class="data-group-title-icon" :src="memberData.coup.icon" mode="aspectFit"></image>
					<view class="data-group-title-text">{{ memberData.coup.group_name }}</view>
				</view>
				<view class="data-group-content">
					<u-cell-group :border="false">
						<!--  -->
						<u-cell-item :title-style="titleStyle" :value-style="valueStyle" hover-class="none" :border-bottom="false" :arrow="false" :title="param.name" :value="param.setting || '未填写'" v-for="(param, index) in memberData.coup.params" :key="param.id"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
			<block v-if="memberData.group">
				<view class="data-group" v-if="memberData.group.length > 0">
					<block v-for="(group, index) in memberData.group" :key="index">
						<view class="data-group-title">
							<image class="data-group-title-icon" :src="group.icon" mode="aspectFit"></image>
							<view class="data-group-title-text">{{ group.group_name }}</view>
						</view>
						<view class="data-group-content">
							<u-cell-group :border="false">
								<!--  -->
								<u-cell-item :title-style="titleStyle" :value-style="valueStyle" hover-class="none" :border-bottom="false" :arrow="false" :title="param.name" :value="param.setting || '未填写'" v-for="param in group.params" :key="param.id"></u-cell-item>
							</u-cell-group>
						</view>
					</block>
				</view>
			</block>
			<view class="zone-bottom" v-if="canHandle"></view>
		</view>
		<view class="footer-bar" v-if="canHandle">
			<view class="footer-bar-item" @tap="onClickFollowBtn">
				<image class="footer-bar-between" v-if="!isFollow" src="@/static/images/zone/icon-add-follow.png" mode="aspectFit"></image>
				<image class="footer-bar-between" v-else src="@/static/images/zone/icon-cancel-follow.png" mode="aspectFit"></image>
			</view>
			<view class="footer-bar-item chat" @tap="toChat"><image class="footer-bar-center" src="@/static/images/zone/icon-chat.png" mode="aspectFit"></image></view>
			<view class="footer-bar-item"><image @tap.stop="giftPopupShow = true" class="footer-bar-between" src="@/static/images/zone/icon-gift.png" mode="aspectFit"></image></view>
		</view>
		<gift-popup v-model="giftPopupShow" :toUser="user_id" @onSuccess="givingSuccess"></gift-popup>
		<ads-fade-in-out :list="adsList"></ads-fade-in-out>
		<vip-join-popup v-model="vipJoinPopup"></vip-join-popup>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
// 引入mescroll-mixins.js
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import momentCard from '@/components/custom/moment-card.vue';
import sexAgeSymbol from '@/components/custom/sex-age-symbol.vue';
import giftPopup from '@/components/custom/gift-popup.vue';
import adsFadeInOut from '../components/custom/ads-fade-in-out.vue';
import vipJoinPopup from '@/components/custom/vip-join-popup.vue';
import mescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: { momentCard, sexAgeSymbol, giftPopup, adsFadeInOut, vipJoinPopup, mescrollEmpty },
	data() {
		return {
			user_id: null,
			memberData: {},
			memberInfo: {},
			isFollow: false,
			disable: true,
			inBlack: false,
			isMySingle: false,
			score: 0,
			fixedTop: false,
			stickyOffsetTop: 0,
			current: 0,
			list: [
				{
					name: '动态'
				},
				{
					name: '个人相册'
				},
				{
					name: '资料'
				}
			],
			titleStyle: {
				fontSize: '26rpx',
				fontWeight: '400',
				color: 'rgba(0,0,0,1)'
			},
			valueStyle: {
				fontWeight: 400,
				color: 'rgba(151,151,151,1)'
			},
			momentList: [],
			photoList: [],
			giftPopupShow: false,
			adsList: [],
			upOption: {
				toTop: {
					bottom: 350
				}
			},
			scrollHeight: null,
			userDataEmpty: {
				tip: '用户未完善资料'
			}
		};
	},
	onLoad(options) {
		// #ifdef APP-PLUS
		this.stickyOffsetTop = Tools.px2rpx(44 + uni.getSystemInfoSync().statusBarHeight);
		// #endif
		this.user_id = options.user_id;
		this.getMemberDetail();
	},
	onShow() {
		this.getMenberGiftReceiveList();
		if (!this.scrollHeight) {
			const systemInfo = uni.getSystemInfoSync();
			// #ifdef MP
			this.scrollHeight = systemInfo.windowHeight - uni.upx2px(428);
			// #endif
			// #ifndef MP
			this.scrollHeight = systemInfo.windowHeight - systemInfo.statusBarHeight - uni.upx2px(428) - 44;
			// #endif
		}
	},
	onNavigationBarButtonTap(e) {
		if (this.user_id) {
			if (e.index == 0) {
				this.navigateTo({
					url: '/pageUser/zone/menu?user_id=' + this.user_id
				});
			}
		}
	},
	computed: {
		canHandle: function() {
			return this.userInfo.login_identity == 10 || this.isMySingle;
		}
	},
	methods: {
		getMemberDetail() {
			this.$u.api.getOtherUserDetail(this.user_id).then(res => {
				const { data, info, match } = res.data;
				this.memberData = data || {};
				this.memberInfo = info;
				this.isFollow = !!match.follow;
				this.inBlack = !!match.inblack;
				this.isMySingle = !!match.mysingle;
				this.score = match.score.score;
				uni.setNavigationBarTitle({
					title: `${info.nickName}的空间`
				});
				this.disable = false;
			});
		},
		fixedToTop() {
			this.fixedTop = true;
		},
		unfixedToTop() {
			this.fixedTop = false;
		},
		changeTabs(index) {
			const temp = this.current;
			this.current = index;
			this.$nextTick(() => {
				if (temp != 2 && index < 2) {
					this.mescroll.resetUpScroll(true);
				}
			});
		},
		upCallback(mescroll) {
			if (this.current == 0) {
				this.getUserMomentList(mescroll);
			} else if (this.current == 1) {
				this.getUserAlbumPhoto(mescroll);
			}
		},
		getUserAlbumPhoto(mescroll) {
			this.$u.api.getOtherUserPhoto(mescroll.num, this.user_id).then(res => {
				const data = res.data.list;
				if (mescroll.num == 1) {
					this.photoList = data.data;
				} else {
					this.photoList.push(data.list);
				}
				console.log(data.data.length);
				this.mescroll.endBySize(data.data.length, data.total);
			});
		},
		getUserMomentList(mescroll) {
			this.$u.api.getMomentList(mescroll.num, this.user_id).then(res => {
				const data = res.data.list;
				if (mescroll.num == 1) {
					this.momentList = data.data;
				} else {
					this.momentList.push(data.list);
				}
				this.mescroll.endBySize(data.data.length, data.total);
			});
		},
		previewImage(index) {
			const list = [];
			this.photoList.map(item => {
				list.push(item.file.file_path);
			});
			uni.previewImage({
				urls: list,
				current: index,
				loop: false,
				indicator: 'none'
			});
		},
		givingSuccess() {
			this.getMenberGiftReceiveList();
			Tools.showSuccess('赠送成功');
		},
		getMenberGiftReceiveList() {
			this.$u.api.getGiftReceiveList(this.user_id).then(res => {
				const list = res.data.list.data;
				const adsList = [];
				for (let i = 0; i < list.length; i++) {
					const img = list[i].giver.avatar;
					const title = `${list[i].giver.nickName} 赠送了 ${list[i].orderPlan.gift_name}`;
					adsList.push({ img, title });
				}
				this.adsList = adsList;
			});
		},
		onClickFollowBtn() {
			if (!this.disable) {
				this.$u.api
					.doHehaviorToSex(this.user_id, 10)
					.then(res => {
						this.disable = true;
						this.getMemberDetail();
						const result = res.data.return;
						result.forEach(item => {
							if (item.to_user == this.user_id) {
								this.isFollow = item.res;
								if (!!this.isFollow) {
									this.$u.toast('关注成功');
								}
							}
						});
					})
					.catch(e => {
						this.disable = false;
					});
			}
		},
		toChat() {
			this.startChat(this.user_id);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.zone-header {
	/* #ifdef H5||APP-PLUS */
	height: calc(428rpx + 44px + var(--status-bar-height));
	padding: calc(44px + var(--status-bar-height)) 0 0;
	/* #endif */
	/* #ifndef H5||APP-PLUS */
	height: 428rpx;
	/* #endif */
	background-position: center bottom;
	background-size: cover;
	.zone-score {
		width: 172rpx;
		height: 50rpx;
		position: absolute;
		/* #ifdef H5||APP-PLUS */
		top: calc(10rpx + 44px + var(--status-bar-height));
		/* #endif */
		/* #ifndef H5||APP-PLUS */
		top: 20rpx;
		/* #endif */
		left: 39rpx;
		font-size: 24rpx;
		font-weight: 500;

		.zone-score-bar {
			width: 172rpx;
			height: 50rpx;
			background: linear-gradient(180deg, #ed4f5d 0%, #fb7a8e 100%);
			// background-color:rgba($color: #fff, $alpha: 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid $theme-main-color;
			color: #ffffff;
			border-radius: 33rpx;
		}
	}
	.zone-header-content {
		height: 328rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.zone-header-count {
			height: 35rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			margin-top: 10rpx;
			.zone-header-count-item {
				font-size: 32rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				&::after {
					content: '';
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					margin-left: 6rpx;
				}
				&.fans {
					&::after {
						content: '粉丝';
					}
				}
				&.follow {
					&::after {
						content: '关注';
					}
				}
			}
			.zone-header-count-dot {
				position: relative;
				height: 30rpx;
				width: 23rpx;
				justify-content: center;
				align-items: center;
				&::after {
					content: '';
					display: block;
					height: 5rpx;
					width: 5rpx;
					background-color: #fff;
					border-radius: 3rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
		.zone-header-name {
			margin-top: 19rpx;
			height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			.zone-header-name-text {
				margin-right: 6rpx;
			}
		}
		.zone-header-face {
			margin-top: 63rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 70rpx;
			border: 2rpx solid rgba(255, 255, 255, 1);
			position: relative;
			.zone-header-face-image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 68rpx;
			}
			.zone-header-face-icon {
				width: 55rpx;
				height: 55rpx;
				position: absolute;
				z-index: 10;
				right: -10rpx;
				bottom: -5rpx;
			}
		}
	}
}
.zone-sticky {
	height: 100rpx;
	width: 750rpx;
	color: #fff;
	background-color: #fff;
	border-radius: 36rpx 36rpx 0px 0px;
	overflow: hidden;
	transition: border-radius 0.1s ease;
	display: flex;
	align-items: center;
	padding: 10rpx 70rpx 0;
	&.fixed-top {
		border-radius: 0;
	}
	.zone-sticky-tab {
		height: 80rpx;
		flex: 1;
	}
}
.zone-body {
	position: relative;
	&.moment {
		background-color: #f2f2f2;
	}
	.zone-ablum {
		display: flex;
		flex-wrap: wrap;
		.zone-image {
			height: 248rpx;
			width: 248rpx;
			margin-bottom: 3rpx;
			margin-left: 3rpx;
			position: relative;
			&:nth-child(3n + 1) {
				margin-left: 0;
			}
		}
	}
}
.data-group-title {
	height: 80rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	line-height: 37rpx;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 20rpx;
	.data-group-title-icon {
		height: 45rpx;
		width: 45rpx;
		margin-right: 10rpx;
	}
	.data-group-title-text {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		letter-spacing: 2rpx;
		display: flex;
		align-items: center;
	}
	.data-group-edit {
		top: 50%;
		margin-top: -18rpx;
	}
}
.zone-bottom,
.footer-bar {
	height: 180rpx;
}
.footer-bar {
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	padding-top: 20rpx;
	.footer-bar-item {
		flex: 1;
		display: flex;
		justify-content: center;
		&.chat {
			align-self: flex-start;
		}
		.footer-bar-between {
			margin-top: 30rpx;
			width: 100rpx;
			height: 100rpx;
		}
		.footer-bar-center {
			width: 130rpx;
			height: 130rpx;
		}
	}
}
</style>
